<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/vue.js"></script>
    <title>更新时的问题</title>
</head>
<body>
    <div id="root">
        <!-- 
        收集表单数据:
        若<input type="text"/> ，则v-model收集的是value值，用户输入的就是value值
        若<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值
        若<input type="checkbox"/>
            1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选,是布尔值）
            2.配置input的value属性
                1)v-model 的初始值是非数组，那么收集的就是checked（勾选 or 未勾选,是布尔值）
                2)v-model 的初始值是数组，那么收集的就是数组中包含value值组成的数组

        备注:v-model的三个修饰符
        lazy:失去焦点在收集数据
        number:限制输入数字
        trim:去掉输入框两端的空格
        -->
        <form @submit.prevent="submit">
            <label for="account">账号:</label>
            <!-- 去掉空格 -->
            <input type="text" id="account" v-model.trim="userInfo.account">
            <br>
            <label for="password">密码:</label>
            <input type="password" id="password" v-model="userInfo.password">
            <br>
            <label for="sex">性别:</label>
            <input type="radio" id="male" value="male" name="sex" v-model="userInfo.sex">男
            <input type="radio" id="female" value="female" name="sex" v-model="userInfo.sex">女
            <br>
            <label for="age">年龄:</label>
            <!-- 限制输入数字 -->
            <input type="number" id="age" v-model.number="userInfo.age">
            <br>
            <label for="hobby">爱好:</label>
            <input type="checkbox" id="learning" value="learning" v-model="userInfo.hobby">学习
            <input type="checkbox" id="gaming" value="gaming" v-model="userInfo.hobby">打游戏
            <input type="checkbox" id="food" value="food" v-model="userInfo.hobby">吃饭
            <br>
            <label for="region">所属校区:</label>
            <select id="region" v-model="userInfo.region">
                <option value="">请选择小区</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="shenzhen">深圳</option>
                <option value="guangzhou">广州</option>
            </select>
            <br>
            其他信息:
            <!-- 懒加载，失去焦点的时候再更新model -->
            <textarea id="other" v-model.lazy="userInfo.other"></textarea>
            <br>
            <input type="checkbox" v-model="userInfo.agree">阅读并同意<a href="http://www.atguigu.com">《用户协议》</a>
            <br>
            <button @click="submit">提交</button>
        </form>
    </div>
</body>
<script>
    //计算属性实现
    var vm = new Vue({
        el: '#root',
        data: {
           userInfo:{
                account:'',
                password:'',
                sex:'female',
                age:'',
                hobby:[],
                region:'',
                other:'',
                agree:false
           }
        },
        methods:{
            submit() {
                console.log(JSON.stringify(this.userInfo));
            }
        }
    })      
</script>
</html>